/* 定义css3前缀*/
@mixin display-flex {
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

@mixin flex-center($flex-direction:column,$align-items:center,$justify-content: center) {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: $flex-direction;
  flex-direction: $flex-direction;
  -webkit-box-pack: $justify-content;
  -ms-flex-pack: $justify-content;
  justify-content: $justify-content;
  -webkit-box-align: $align-items;
  -ms-flex-align: $align-items;
  align-items: $align-items;
}

.activity {
  background: #fff;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  .activity-banner {
    width: 100%;
    position: relative;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .ant-tabs-bar .ant-tabs-nav-container .ant-tabs-nav-wrap .ant-tabs-nav-scroll .ant-tabs-nav .ant-tabs-tab a {
    width: 100%;
    height: 100%;
    color: rgba(0, 0, 0, .65);
    display: block;
  }
  .ant-tabs-bar .ant-tabs-nav-container .ant-tabs-nav-wrap .ant-tabs-nav-scroll .ant-tabs-nav .ant-tabs-tab-active a {
    width: 100%;
    height: 100%;
    color: #fff !important;
    display: block;
  }

  .activity-content {
    max-width: 980px;
    margin: 0 auto;
    padding-bottom: 100px;
    /*妈妈课程的样式 自己在组件里面新增了className*/
    .activeLesson {
      @include display-flex;
      @include flex-center(column, first-start);
      height: auto;
      .memberActivity { /* 会员活动*/
        width: 980px;

        border: 1px solid #b57332;
            @include display-flex;
            .memberActivityTitle {
              @include display-flex;
              @include flex-center(column, center, center);
              width: 45px;
              background: #eee4d8;

              div {
                width: 16px;
                font-size: 16px;
                line-height: 18px;
                color: #000;
              }

            }

            .titleActivity { /* 标题*/
              width: 933px;
              background: #eee4d8;
              color: #b47332;
              height: 46px;

              text-align: center;
              div {
                height: 46px;
                line-height: 46px;
                border-left: 1px solid #ddc2a8;
                border-right: 1px solid #d3af8a;

              }

              .themeActivity {
                width: 256px;
                border-left: 2px solid #ddc2a8;

              }
              .speakerActivity {
                width: 120px;

              }
              .timerActivity {
                width: 124px;

              }
              .weekActivity {
                width: 76px;

              }
              .localtionrActivity {
                width: 132px;
              }
              .peopleActivity {
                width: 90px;
              }
              .peopleNumActivity {
                width: 70px;
              }
              .applyActivity {
                width: 65px;
                border-right: 1px solid #f9f4ec;
              }
            }
            .noBg {
              background: #fff;
            }

          }
          /* center*/
          .activeLessonCenter {
            width: 980px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px solid #c58f5c;
            border-top: none;
            border-bottom: none;
            font-size: 14px;
          }
        }

        .ant-tabs {
          margin-top: 100px;
        }
        .ant-tabs-ink-bar {
          display: none;
        }
        .ant-tabs-bar {
          width: 840px;
          .ant-tabs-nav-container {
            height: 100%;
            .ant-tabs-nav-wrap {
              height: 100%;
              .ant-tabs-nav-scroll {
                height: 100%;
                .ant-tabs-tab {
                  width: 210px;
                }
              }
            }
          }
        }

        .ant-tabs-content {
          margin-top: 50px;
          h3 {
            font-size: 24px;
            color: #333;
            margin-bottom: 40px;
          }
          .activityTabBox {
            height: 400px;
            max-width: 980px;
            width: 980px;
            .slick-prev {

              height: 32px;
              width: 32px;
              z-index: 9999;
              left: 0;
              top: 185px;
              background: url(./img/left.png) no-repeat left;

            }
            .slick-next {
              height: 32px;
              width: 32px;
              z-index: 9999;
              right: 0;
              top: 185px;
              background: url(./img/right.png) no-repeat right;
            }
            .ant-carousel {
              height: 400px;
              .slick-list {
                height: 400px;
                left: 38px;
                width: 910px;

                a {
                  float: left;
                  margin-right: 20px;
                  width: 212px;
                  img {
                    float: left;
                    height: 316px;
                    width: 212px;
                  }
                  p {
                    height: 83px;
                    width: 212px;
                    font-size: 16px;
                    color: #333;
                    padding: 18px 15px;
                    line-height: 26px;
                  }
                }
              }
            }
            .lastNews {
              margin-right: 0;
            }
            .activityNewsLeft {
              float: left;
              width: 440px;
              img {
                width: 400px;
              }
            }
            a {
              float: left;
              p {
                width: 300px;
              }
            }
            .activityNewsRight {
              float: left;
              width: 540px;
              position: relative;
              height: 400px;
              p {
                line-height: 38px;
                width: 100%;
                font-size: 18px;
                font-family: "微软雅黑";
                text-indent: 0em;
              }
              .News-List {
                height: auto;
                .NewsTitle {
                  height: auto;
                  display: none;
                  p {
                    height: auto;
                    background: none;
                    width: 100%;
                    float: left;
                    line-height: 32px;
                    font-size: 18px;
                    font-family: "微软雅黑";
                    width: 100%;
                    text-indent: 0em;
                    color: #999;
                    padding: 0;

                  }
                }
                a {
                  float: left;
                  width: 100%;
                  height: auto;
                  line-height: 40px;
                  font-size: 18px;
                  font-family: "微软雅黑";
                  width: 100%;
                  text-indent: 0em;
                  color: #000;
                  padding: 0;
                }

              }
              .News-List:hover {
                .newsHover {
                  font: 22px "微软雅黑";
                  color: #b67233;
                }
                .NewsTitle {
                  display: block;
                }
              }
              .more {
                display: block;
                height: 44px;
                width: 134px;
                border-radius: 44px;
                border: 2px solid #b67333;
                position: absolute;
                right: 40px;
                bottom: 70px;
                span {
                  float: left;
                  height: 44px;
                  width: 134px;
                  text-align: center;
                  line-height: 40px;
                  font-size: 16px;
                  font-family: "微软雅黑";
                  color: #b67333;
                  border-radius: 44px;
                }
              }
            }
          }
        }
      }
    }
